<!doctype html> 
<html lang="zh_CN">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./fonts/boostrapicons/bootstrap-icons.css">
    <title>jQuery入门-事件</title>
  </head>
  <body>
     
      <button class="btn btn-danger btn-lg" id="btn1">on事件</button>
      <button class="btn btn-warning btn-lg" id="btn2">click事件</button>
      <button class="btn btn-success btn-lg" id="btn3">hover事件</button>
      <br>
      <br>
      <br>
      <button type="button" 
              data-trigger="focus" 
              class="btn btn-lg btn-danger" 
              data-placement="top" 
              data-toggle="popover" 
              title="弹框的标题" 
              data-content="这就是弹出框的内容">Click to toggle popover</button>
      <button class="btn btn-success btn-lg" id="btn4" >警告框</button>
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <button class="btn btn-success btn-lg" id="btn5" >弹框</button>
      <!-- 弹框内容 -->
      <div aria-live="polite"  aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

        <!-- Then put toasts within -->
        <div class="toast" id="myToast"  role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
        
            <strong class="mr-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body">
            Hello, world! This is a toast message.
          </div>
        </div>
      </div>  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/plugins/bootstrap/jquery.slim.min.js" ></script>
    <script src="./js/plugins/bootstrap/popper.min.js"></script>
    <script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
    <script>
         $(function(){
           
          $('#myToast').on('shown.bs.toast', function () {
             console.log("弹框已经完整的弹出来。。。");
          })

           $("#btn5").click(function(){
             //将所有的toast元素都追加一个新的属性，关闭弹框的默认行为
            $('.toast').attr("data-autohide","false");
            $('.toast').toast('show');
           });  

          //boostrap从性能考虑，必须手动初始化弹框 
          $('[data-toggle="popover"]').popover();
          
          $("#btn4").click(function(){
            $('.alert').alert('close');
          });
           //为id值为btn1的元素绑定了click （blur,focus,change,dbclick）事件
           $("#btn1").on('click',function(){
                console.log("按钮被单击了。。。");
           });
            
           //click事件（简写）
           $("#btn2").click(function(){
                 console.log("btn2按钮被单击了。。。");
           });

           $("#btn3").hover(function(){
             console.log("hover-in");
           },function(){
             console.log("hover-out");
           });
         })
    </script>
  </body>
</html>